<template>
	<view class="control">
		<QSNavbar :navbarItems="navbarItems_1" backgroundColor="rgba(0,0,0,0)"></QSNavbar>
		<view class="header flex-align">
			<view class="image">
				<u--image width="100%" height="100%" src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle"></u--image>
				<image mode="aspectFit" class="small" src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/f723fb9dc8e7722b040c99c7ad82c36be4d3fdf7.png"></image>
				<!-- <image mode="widthFix" class="small" src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/e8f99238470a999ece429d7c0688169eadd3326d.png"></image> -->
				<!-- <image mode="widthFix" class="small" src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/277f15cd5e4ea646bad7bed5aad0dbe695baab78.png"></image> -->
			</view>
			<view class="detail">
				<view class="head-1 flex-align">
					<view class="name">张益达</view>
					<view class="name-2">绍兴奥体</view>
				</view>
				<view class="head-2 flex-align">
					<u-tag text="男" size="mini"></u-tag>
					<u-tag text="24" size="mini"></u-tag>
					<u-tag text="教练组" size="mini"></u-tag>
					<u-tag text="全职组" size="mini"></u-tag>
				</view>
				<view class="head-3 flex-align">
					工作10年<view></view>游泳、健身教练
				</view>
			</view>
		</view>
		
		<!-- 内容 -->
		<view class="main">
			 <u-tabs @click="changeTab" :list="tabList" lineWidth="50" :activeStyle="{color:'rgb(47,117,250)',fontWeight:700}"></u-tabs>
			<view class="con">
				<view class="tab-con" v-show="tabActive === 0">
					<navigator url="/pages/train/train" class="goods-item flex-align" v-for="item in 10" :key="item">
						<view class="image">
							<u--image width="100%" height="100%" src="https://cdn.uviewui.com/uview/album/1.jpg"></u--image>
							<view class="image-info">326人已报名</view>
							<view class="tag">热门</view>
						</view>
						<view class="detail">
							<view>
								<view class="title">第三期-瑜伽塑性搞短培训班课程欢迎</view>
								<view class="detail-1 flex-align">
									<view class="tag">初级</view>
									<view class="tag">成人</view>
								</view>
								<view class="flex-align detail-2">
									<image mode="aspectFit" src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/16b64ab661803b447f713dbd9d40c939b98f9a5b.png"></image>
									剩余名额：88人
								</view>
							</view>
							<view class="flex-align">
								<view class="price">￥<text>888.00</text></view>
								<view class="info">15节课</view>
							</view>
						</view>
					</navigator>
				</view>
				
				<view class="tab-con" v-show="tabActive === 1">
					<view class="info-item">
						<view class="title flex-align">
							<text>基本资料</text>
						</view>
						<view class="basic-list">
							<view class="basic-item flex-align">
								出生日期：1995-03-11
							</view>
							<view class="basic-item flex-align">
								手机号：15354684421
							</view>
							<view class="basic-item flex-align">
								住址：上海市宝山区人民北路66号荣光辉大道6楼
							</view>
							<view class="basic-item flex-align">
								工作岗位：教练部
							</view>
							<view class="basic-item flex-align">
								工号：20130305143
							</view>
							<view class="basic-item flex-align">
								员工卡：20130305143
							</view>
							<view class="basic-item flex-align">
								内码：20130305143
							</view>
							<view class="basic-item flex-align">
								入职时间：2013/12/15
							</view>
						</view>
					</view>
					<view class="info-item">
						<view class="title flex-align">
							<text>教练相册</text>
						</view>
						<u-album maxCount="4" :urls="urls2" :rowCount="4"></u-album>
					</view>
					<view class="info-item">
						<view class="title flex-align">
							<text>教练资质</text>
						</view>
						<view class="basic-list strong">
							<view class="basic-item flex-align">
								教练资质：13616544654684
							</view>
						</view>
					</view>
					<view class="info-item">
						<view class="title flex-align">
							<text>教学经历</text>
						</view>
						<view class="basic-list strong">
							<view class="basic-item flex-align">
								2016.01-2019.06：国家体育馆游戏教练
							</view>
							<view class="basic-item flex-align">
								2016.01-2019.06：国家体育馆游戏教练
							</view>
						</view>
					</view>
					<view class="info-item">
						<view class="title flex-align">
							<text>个人荣耀</text>
						</view>
						<view class="basic-list strong">
							<view class="basic-item flex-align">
								2015-2017年上海拥有竞标冠军
							</view>
							<view class="basic-item flex-align">
								2015-2017年上海拥有竞标冠军
							</view>
							<view class="basic-item flex-align">
								2015-2017年上海拥有竞标冠军
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import QSNavbar from '@/components/QS-Navbar/QS-Navbar.vue';
	export default {
		data() {
			return {
				navbarItems_1: [{
					type: 'icon',
					icon: 'back',
					layout: 'left',
					width: 15,
					doEvent: 'back',
					iconColor: '#fff'
				}, {
					type: 'text',
					text: '教练信息',
					width: 70,
					weight: 'bold',
					color: '#fff',
					textAlign: 'left'
				}],
				tabList:[
					{name:'在授课程'},
					{name:'教练介绍'}
				],
				tabActive:0,
				 urls2: [
					'https://cdn.uviewui.com/uview/album/1.jpg',
					'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg',
					'https://cdn.uviewui.com/uview/album/4.jpg',
					'https://cdn.uviewui.com/uview/album/5.jpg',
					'https://cdn.uviewui.com/uview/album/6.jpg',
					'https://cdn.uviewui.com/uview/album/7.jpg',
					'https://cdn.uviewui.com/uview/album/8.jpg',
					'https://cdn.uviewui.com/uview/album/9.jpg',
					'https://cdn.uviewui.com/uview/album/10.jpg',
				],
			}
		},
		components:{
			QSNavbar
		},
		methods: {
			changeTab(data){
				this.tabActive = data.index
			}
		}
	}
</script>

<style scoped lang="scss">
	.control{
		width: 100%;
		min-height: 100vh;
		background-image: url("https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/8400abb877da5033244752b3d0e1be87fc7e0f41.png");
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-color: white;
		display: flex;
		flex-direction: column;
		.header{
			padding: 0px 30rpx;
			box-sizing: border-box;
			width: 100%;
			.image{
				width: 130rpx;
				height: 130rpx;
				position: relative;
				border-radius: 50%;
				border: 2px solid rgb(254,254,252);
				/deep/ >view{
					height: 100%;
				}
				.small{
					position: absolute;
					width: 100%;
					height: 50rpx;
					bottom: -25rpx;
					left: 0;
				}
			}
			.detail{
				margin-left: 26rpx;
				.head-1{
					margin-bottom: 10rpx;
					align-items: flex-end;
					.name{
						color: rgb(255,255,255);
						font-size: 40rpx;
						font-weight: 700;
						white-space: nowrap;
					}
					.name-2{
						margin-left: 21rpx;
						color: rgb(255,255,255);
						font-size: 26rpx;
						font-weight: 700;
						white-space: nowrap;
						transform: translateY(-7rpx);
					}
				}
				.head-2{
					/deep/ .u-tag{
						margin-right: 10rpx !important;
						height: 35rpx;
					}
				}
				.head-3{
					margin-top: 20rpx;
					color: rgb(255,255,255);
					font-size: 25rpx;
					font-weight: 700;
					white-space: nowrap;
					view{
						margin: 0px 9rpx;
						background-color: rgb(255,255,255);
						width: 1rpx;
						height: 24rpx;
					}
				}
			}
		}
		
		.main{
			margin-top: 40rpx;
			height: 0;
			flex: 1;
			display: flex;
			flex-direction: column;
			border-radius: 40rpx 40rpx 0px 0px;
			background-color: rgb(255,255,255);
			/deep/ .u-tabs__wrapper__nav__item{
				flex: 1;
			}
			.con{
				border-top: solid 6rpx rgb(239, 239, 239);
				padding: 0px 30rpx;
				padding-bottom: 30rpx;
				min-height: 400rpx;
				box-sizing: border-box;
				overflow: auto;
				flex: 1;
				.tab-con{
					.goods-item{
						height: 220rpx;
						margin-top: 30rpx;
						.image{
							width: 200rpx;
							height: 100%;
							border-radius: 15rpx;
							overflow: hidden;
							position: relative;
							
							/deep/ .u-transition{
								width: 100%;
								height: 100%;
							}
							.image-info{
								position: absolute;
								bottom: 0;
								width: 100%;
								left: 0;
								font-size: 24rpx;
								text-align: center;
								color: white;
								padding: 10rpx 0;
								background-color: rgba(0,0,0,0.5);
							}
							.tag{
								position: absolute;
								top: 0;
								left: 0;
								font-size: 23rpx;
								color: white;
								padding: 7rpx 15rpx;
								border-radius: 0px 0px 15rpx 0px;
								background-image: linear-gradient(to right,#ffa091,#ff184c);
							}
						}
						.detail{
							flex: 1;
							width: 0;
							height: 100%;
							display: flex;
							flex-direction: column;
							margin-left: 30rpx;
							justify-content: space-between;
							.title{
								font-size: 28rpx;
								margin-bottom: 10rpx;
								width: 100%;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
							.tag{
								font-size: 22rpx;
								background-color: #f4f3f4;
								border-radius: 8rpx;
								padding: 5rpx 10rpx;
								margin-right: 20rpx;
								margin-bottom: 20rpx;
							}
							.detail-2{
								color: #a3a3a3;
								font-size: 23rpx;
								image{
									width: 25rpx;
									height: 30rpx;
									margin-right: 10rpx;
								}
							}
							.price{
								color: #ff6a42;
								text{
									font-weight: 700;
									font-size: 37rpx;
								}
							}
							.info{
								color: #a3a3a3;
								font-size: 23rpx;
								margin-left: 15rpx;
								transform: translateY(4rpx);
							}
						}
					}
					
					.info-item{
						padding-top: 30rpx;
						margin-top: 10rpx;
						background-image: url("https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/c809443631a7a14ecc1530b9dcad6725d03d875b.png");
						background-repeat: no-repeat;
						background-size: 50rpx auto;
						background-position: 60rpx 10rpx;
						.title{
							margin-bottom: 20rpx;
							color: rgb(51,51,51);
							font-size: 30rpx;
							font-weight: 700;
							transform: translateX(70rpx);
						}
						.basic-list{
							.basic-item{
								color: rgb(102,102,102);
								font-size: 26rpx;
								font-weight: 500;
								white-space: nowrap;
								margin-bottom: 20rpx;
								&::before{
									content: '';
									display: block;
									width: 16rpx;
									height: 16rpx;
									border-radius: 50%;
									margin-right: 31rpx;
									background-color: #5c93fb;
								}
							}
						}
						/deep/ .u-album__row__wrapper{
							width: 25%;
							margin-right: 0 !important;
							overflow: hidden;
							border-radius: 10rpx;
							&:last-of-type{
								width: auto;
							}
						}
						.strong .basic-item{
							font-weight: 700 !important;
							color: rgb(136,136,136);
						}
					}
				}
			}
		}
	}
</style>
